<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="地址">
        <el-input v-model="formInline.search" placeholder="请输入地址" clearable />
      </el-form-item>
      <el-form-item label="发布时间">
        <datePickerRange v-model:start="formInline.startTime" v-model:end="formInline.endTime">
        </datePickerRange>
      </el-form-item>
      <el-form-item label="职位状态">
        <el-select v-model="formInline.status" placeholder="请选择职位状态">
          <el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.records" border stripe v-loading="loading">
      <el-table-column type="index" width="80" align="center" />
      <el-table-column label="职位" align="center" min-width="200">
        <template #default="scope">
          {{name_format(scope.row.workTypes)}}
        </template>
      </el-table-column>
      <el-table-column prop="workAddress" label="工作地址" align="center" min-width="300" />
      <el-table-column prop="realName" label="联系人" align="center" min-width="150" />
      <el-table-column prop="userPhone" label="联系电话" align="center" min-width="150" />
      <el-table-column prop="digest" label="职位状态" align="center" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.status==0">{{status_format(scope.row.status)}}</el-tag>
          <el-tag type="success" v-else-if="scope.row.status==3">{{status_format(scope.row.status)}}</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status==2">{{status_format(scope.row.status)}}</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status==1">{{status_format(scope.row.status)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="oneDayWage" label="价格" align="center" min-width="100">
        <template #default="scope">
          {{scope.row.oneDayWage}}元/天
        </template>
      </el-table-column>
      <!-- <el-table-column prop="workNumDictName" label="用工人数" align="center" min-width="100" />
      <el-table-column prop="constructionPeriodDictName" label="预计工期" align="center" min-width="100" /> -->
      <el-table-column prop="digest" label="发布身份" align="center">
        <template #default="scope">
          {{scope.row.userType==0?'个人':"企业"}}
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="发布时间" align="center" min-width="200" />
      <el-table-column prop="gmtModified" label="审核通过时间" align="center" min-width="200" />
      <el-table-column label="操作" align="center" fixed="right" min-width="280">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row,1)">拨打记录</el-button>
          <el-button type="primary" text @click="handleClick(scope.row,2)">岗位详情</el-button>
          <el-button type="primary" text @click="handleClick(scope.row,3)" :disabled="scope.row.status!=0">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <jobDetails ref="jobDetailsCom"></jobDetails>

    <approval ref="approvalCom" @fatherMethods="search" request="jobPostAudit"></approval>

    <callHistory ref="callHistoryCom"></callHistory>
  </div>
</template>

<script setup lang="ts">
import jobDetails from "@/views/freeLobbyManage/components/jobDetails.vue"; //招工详情
import approval from "@/views/freeLobbyManage/components/approval.vue"; //审批
import callHistory from "@/views/freeLobbyManage/components/callHistory.vue"; //拨打记录
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();

let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  status: null,
  search: "",
  startTime: "",
  endTime: "",
});
let tableData = ref({});
let loading = ref(false);
let statusList = ref([
  { label: "待审核", value: 0 },
  { label: "未通过", value: 1 },
  { label: "正在招", value: 2 },
  { label: "已招满", value: 3 },
]);

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  try {
    loading.value = true;
    tableData.value = await proxy.$apis.pcPostingPage(formInline.value);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    status: null,
    search: "",
    startTime: "",
    endTime: "",
  };
  getInfo();
};
let status_format = (e) => {
  let index = proxy.$utils.findIndexByField(statusList.value, "value", e);
  return statusList.value[index].label;
};
let name_format = (array) => {
  let list = [];
  array.forEach((element) => {
    list.push(element.name);
  });
  return list.toString();
};
let handleClick = (row, num: Number) => {
  switch (num) {
    case 1:
      proxy.$refs.callHistoryCom.open(row);
      break;
    case 2:
      proxy.$refs.jobDetailsCom.open(row.id);
      break;
    case 3:
      proxy.$refs.approvalCom.open(row.id);
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
